<template>
  <vuedraggable class="row h-100 p-5" group="name" v-model="getarr">
    <mydraggable
      class="col h-100 p-2 border"
      v-for="(v, i) in getarr"
      :key="i"
      v-bind="{ arr: v, index: i, setarr: _setarr }"
    >
    </mydraggable>
  </vuedraggable>
</template>

<script>
import vuedraggable from "vuedraggable";
import mydraggable from "./draggable.vue";
import uarr from "./utilarr";

export default {
  components: {
    vuedraggable,
    mydraggable,
  },
  name: "HelloWorld",
  props: ["arr", "setarr"],
  methods: {
    _setarr(key, brr) {
      const arr = JSON.parse(JSON.stringify(this.arr));
      arr[key] = brr;

      this.setarr("", arr);
    },
  },
  computed: {
    classname() {
      return 666;
    },
    getarr: {
      get() {
        return this.arr;
      },
      set(brr) {
        let index = brr.findIndex((v, k) => {
          if (typeof v === "object") {
            const _v = JSON.stringify(v);
            const _brr = JSON.stringify(this.arr[k]);
            return _v !== _brr;
          }
        });
        if (index === -1) index = 0;
        if (index === this.arr.length) index = this.arr.length - 1;
        const arr = uarr(brr, this.arr, index, "helloworld");
        this.setarr("", arr);
      },
    },
  },
};
</script>
